<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>收费报表</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>

<div class="demoTable">
    搜索姓名：
    <div class="layui-inline">
        <input class="layui-input" name="clientname" id="demoReload" autocomplete="off">
    </div>

        <div class="layui-inline">
            <label class="layui-form-label">日期范围</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="testh" placeholder=" - ">
            </div>
        </div>
    <button class="layui-btn" data-type="reload" id="searchBtn">搜索</button>
        <button class="layui-btn" data-type="reload" id="addBtn">添加</button>
            <button class="layui-btn" data-type="reload" id="qxBtn">查看全部</button>
</div>



<table class="layui-hide" id="demo1" lay-filter="test"></table>
<script>
    layui.use([ 'laypage', 'laydate','layer', 'table'], function(){
        var laydate = layui.laydate;
        var laypage = layui.laypage //分页
            ,layer = layui.layer //弹层
            ,table = layui.table;//表格
        //日期范围
        laydate.render({
            elem: '#testh'
            ,range: '~'

        });
        //执行一个 table 实例
        table.render({
            elem: '#demo1'
            ,height:500
            ,url: 'selcol' //数据接口
            ,title: '欠费报表'
            ,page: true //开启分页
            ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板
            ,totalRow: true //开启合计行
            ,limits:[1,3,5]
            ,cols: [
                [ //表头
                    {type: 'checkbox', fixed: 'left'}
                    ,{field: 'roomno', title: '房间编号', totalRowText: '合计：'}
                    ,{field: 'clientname', title: '客户姓名'}
                    ,{field: 'patitemsName', title: '收费项目'}
                    ,{field: 'assessment', title: '收费金额',totalRow: true}
                    ,{field: 'paymentType', title: '付款方式'}
                    ,{field: 'collectDate', title: '收费时间'}
                    ,{field: 'tollgatherer', title: '收费员',}
                    ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
                ]
            ]
            , id: 'selcol'
        });
        //分页
        laypage.render({
            elem: 'pageDemo' //分页容器的id
            ,count: 100 //总页数
            ,skin: '#1E9FFF' //自定义选中色值
            //,skip: true //开启跳页
            ,jump: function(obj, first){
                if(!first){
                    layer.msg('第'+ obj.curr +'页', {offset: 'b'});
                }
            }
        });
        //执行条件查询
        /*条件查询按钮*/
        var $ = layui.$;
        $('#searchBtn').on('click', function(){
            //获取输入框
            var demoReload = $('#demoReload');
            var testh = $('#testh');
            //执行重载
            table.reload('selcol', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                    clientname: demoReload.val(),
                    testh:testh.val()
                }
            });
        });
    });
</script>
<style>
    #two{
        position: absolute;
        left:230px;
        top:0px;
    }
    #three{
        position: absolute;
        left: 430px;
        top:40px;
    }
    #four{
        position:absolute;
        left:710px;
        top:40px;
    }
    #five{
        position: absolute;
        top:30px;
        left:1050px;
    }
</style>
</body>
</html>
